<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义事件</title> 
        <script src = "../../vue.min.js"></script>
    </head>
    <body>
    <!--显示在这个div中的内容全是父组件模板-->
        <div id = "app">
            <button @click="handleRef">通过ref获取子组件实例</button>
            <component-a ref="comA"></component-a>
        </div>
        <script>

            Vue.component('component-a',{
                template:'<div>子组件</div>',
                data:function () {
                    return {
                        message: '子组件内容'
                    }
                }
            });
            var app = new Vue({
                el: '#app',
                methods:{
                    handleRef:function () {
                        //通过$refs来访问指定的实例(指定名称的子组件)
                        var msg=this.$refs.comA.message;
                        console.log(msg);
                    }
                }
            })
        </script>
    </body>
</html>